<template>
  <cu-layout title="绑定设备">
    <view class="">
      <view class="flex-vca top">
        <view class="text-20 font-600">温馨提示</view>
        <view class="text-15 leading-24 mt-15 pb-5">扫描或输入设备号绑定设备，可随时查看流量使用情况</view>
      </view>
      <view class="px-20">
        <view class="bg-white mt-40 mb-15">
          <uv-input v-model="state.code" :font-size="16" :custom-style="{padding: '10px'}" placeholder="请输入ICCI号">
            <template #suffix>
              <view class="flex"><text class="iconfont icon-saoma text-24 leading-24" @click="onScan('code')" /></view>
            </template>
          </uv-input>
        </view>
        <view class="bg-white  mb-15">
          <uv-input v-model="state.imei" :font-size="16" :custom-style="{padding: '10px'}" placeholder="请输入IMEI号">
            <template #suffix>
              <view class="flex"><text class="iconfont icon-saoma text-24 leading-24" @click="onScan('imei')" /></view>
            </template>
          </uv-input>
        </view>
        <view class="">
          <uv-button size="large" :loading="state.loading" :disabled="!state.code || !state.code" type="primary" :color="`linear-gradient(to right, ${$.color.primary}, ${$.color.primaryDark})`" @click="save">
            <view class="px-5">绑定</view>
          </uv-button>
        </view>
      </view>

      <view v-show="!!state.searchList.length" class="p-20">
        <view class="bg-white rounded-8">
          <uv-cell-group title="搜索历史">
            <uv-cell v-for="item in state.searchList" :key="item.id" icon="tags" :arrow="false" :title="item.code" @click="clickLog(item)">
              <template #right-icon>
                <view class="" @click.stop="remove(item.id)">
                  <uv-icon :color="$.color.error" size="20" name="trash" />
                </view>
              </template>
            </uv-cell>
          </uv-cell-group>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'

const state = reactive({
  code: '',
  imei: '',
  loading: false,
  searchList: []
})

onLoad(async() => {
  reload()
})

function onScan(keyName = 'code') {
  $.utils.scanQRCode().then(res => {
    // res.result = '8986112322704847944'
    if (res.result) {
      state[keyName] = res.result
      reload()
    }
  }, () => {
    $.utils.toast('扫码失败')
  })
}

function remove(id) {
  $.get('/user/searchDel', { id }).then(res => {
    reload()
    $.utils.toast(res.msg)
  })
}

function reload() {
  $.get('/user/searchList').then(res => {
    state.searchList = res.data
  })
  // /user/searchAgent
}

function clickLog(data) {
  state.code = data.code || ''
  state.imei = data.imei || ''
}

function save() {
  state.loading = true
  $.get('/user/searchAgent', { code: state.code, imei: state.imei }).then(res => {
    if (res.success) {
      $.store('user').getAgent(res.data.id).then(() => {
        $.router.redirect('/pages/index/index')
      })
    } else {
      $.utils.toast(res.msg)
      reload()
    }
    state.loading = false
  })
}

</script>

<style lang="scss">
.top {
	color: #fff;
	height: 320rpx;
	padding: 0 100rpx;
	text-align: center;
	background-image: linear-gradient(0deg, $uv-primary-dark, $uv-primary 50%);
}
</style>
